import React from 'react';
import { Card, Col, Row ,Input,Cascader ,Button ,Tabs ,Table, Tag } from 'antd';
import './OrderManage.css'

const orderTypeOptions = [
	{
		value: '普通订单',
		label: '普通订单',
	},
	{
		value: '拼团订单',
		label: '拼团订单',
	},
];
const orderStateOptions = [
	{value: '已取消', label: '已取消'},
	{value: '退款中', label: '退款中'},
	{value: '已支付', label: '已支付'},
	{value: '待支付', label: '待支付'},
	{value: '已发货', label: '已发货'},
	{value: '待发货', label: '待发货'}
];
const sendTypeOptions = [
	{value: '送货上门', label: '送货上门'},
	{value: '快递', label: '快递'},
];
const { TabPane } = Tabs;
const dataSource  = [
		{ 'orderId': '1', goodsName: "BJORKSNAS 约纳斯",buyNum:1, buyerName: "光头强", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.05", orderState: "待发货", address: "成都",channelId:"京东",myOrderType:"拼团订单",reword:[],expressage:"",weiChartName:"jjdfgg"},
		{ orderId: '2', goodsName: "LISABO 利萨伯",buyNum:3, buyerName: "袁大头", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.01", orderState: "已发货", address: "成都" ,channelId:"京东",myOrderType:"普通订单",reword:[{content:"快点发货哟！",date:"2020.01.03"}],expressage:"222",weiChartName:"dfgsfggsg"},
		{ orderId: '3', goodsName: "KORTGARDEN 库佳顿",buyNum:2, buyerName: "光头强", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2019.12.31", orderState: "待支付", address: "成都" ,channelId:"京东",myOrderType:"普通订单",reword:[],expressage:"",weiChartName:"sdfgsdfg"},
		{ orderId: '4', goodsName: "LISABO 利萨伯",buyNum:5, buyerName: "明大龙", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2019.12.31", orderState: "已支付", address: "成都" ,channelId:"京东",myOrderType:"普通订单",reword:[{content:"快点发货哟！",date:"2020.01.03 13:24",person:"用户"}],expressage:"",weiChartName:"jhsdfsh"},
		{ orderId: '5', goodsName: "LISABO 利萨伯",buyNum:5, buyerName: "喜洋洋", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2019.12.31", orderState: "已支付", address: "成都" ,channelId:"天猫",myOrderType:"普通订单",reword:[{content:"快点发货哟！",date:"2020.01.03 13:24",person:"用户"}],expressage:"",weiChartName:"h4qetydrg"},
		{ orderId: '6', goodsName: "LISABO 利萨伯",buyNum:5, buyerName: "灰太狼", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2019.12.31", orderState: "已支付", address: "成都" ,channelId:"京东",myOrderType:"普通订单",reword:[{content:"快点发货哟！",date:"2020.01.03 13:24",person:"用户"}],expressage:"",weiChartName:"rtrtra"},
		{ orderId: '7', goodsName: "GULLHOLMEN 格霍曼",buyNum:2, buyerName: "李大爷", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.01", orderState: "退款中", address: "成都",channelId:"京东" ,myOrderType:"普通订单",reword:[{content:"你们发货速度太慢了！",date:"2020.01.03 13:24",person:"用户"}],expressage:"",weiChartName:"hs53wusay56u6"},
		{ orderId: '8', goodsName: "STRANDMON 斯佳蒙",buyNum:3, buyerName: "何美美", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.04", orderState: "已取消", address: "成都" ,channelId:"京东",myOrderType:"普通订单",reword:[],expressage:"",weiChartName:"yhsdfyh545"},
		{ orderId: '9', goodsName: "STRANDMON 斯佳蒙",buyNum:3, buyerName: "博格巴", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.04", orderState: "已取消", address: "成都" ,channelId:"拼多多",myOrderType:"拼团订单",reword:[],expressage:"",weiChartName:"7ww5tyh5"},
		{ orderId: '10', goodsName: "STRANDMON 斯佳蒙",buyNum:3, buyerName: "熊瞎子", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.04", orderState: "已取消", address: "成都" ,channelId:"天猫",myOrderType:"拼团订单",reword:[],expressage:"",weiChartName:"hh565w32345"},
		{ orderId: '11', goodsName: "HEMNES 汉尼斯",buyNum:4, buyerName: "陈老实", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2019.12.20", orderState: "已完成", address: "成都",channelId:"天猫",myOrderType:"拼团订单" ,reword:[{content:"东西很漂亮，下次再来！",date:"2020.01.03 13:24",person:"用户"}],expressage:"111201",weiChartName:"5g5g55q"},
		{ orderId: '12', goodsName: "HEMNES 汉尼斯",buyNum:4, buyerName: "彭大帅", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2019.12.20", orderState: "已完成", address: "成都" ,channelId:"天猫",myOrderType:"拼团订单",reword:[{content:"东西很漂亮，下次再来！",date:"2020.01.03 13:24",person:"用户"}],expressage:"111202",weiChartName:"gg444542"},
		{ orderId: '13', goodsName: "HEMNES 汉尼斯",buyNum:4, buyerName: "黄老邪", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2019.12.20", orderState: "已完成", address: "成都" ,channelId:"拼多多",myOrderType:"拼团订单",reword:[{content:"东西很漂亮，下次再来！",date:"2020.01.03 13:24",person:"用户"}],expressage:"111203",weiChartName:"h5433a4gfffsa"},
		{ orderId: '14', goodsName: "HEMNES 汉尼斯",buyNum:4, buyerName: "欧阳锋", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2019.12.20", orderState: "已完成", address: "成都" ,channelId:"拼多多",myOrderType:"拼团订单",reword:[{content:"东西很漂亮，下次再来！",date:"2020.01.03 13:24",person:"用户"}],expressage:"111204",weiChartName:"fr44ts"},
		{ orderId: '15', goodsName: "HEMNES 汉尼斯",buyNum:4, buyerName: "暴发户", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2019.12.20", orderState: "已完成", address: "成都" ,channelId:"拼多多",myOrderType:"拼团订单",reword:[{content:"东西很漂亮，下次再来！",date:"2020.01.03 13:24",person:"用户"}],expressage:"111205",weiChartName:"4sgdfsgshh"},
		{ orderId: '16', goodsName: "HEMNES 汉尼斯",buyNum:4, buyerName: "李子吉", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2019.12.20", orderState: "已完成", address: "成都" ,channelId:"京东",myOrderType:"普通订单",reword:[{content:"东西很漂亮，下次再来！",date:"2020.01.03 13:24",person:"用户"}],expressage:"111206",weiChartName:"fgs4sdfgsg"},
		{ orderId: '17', goodsName: "HEMNES 汉尼斯",buyNum:4, buyerName: "李稻葵", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2019.12.20", orderState: "已完成", address: "成都" ,channelId:"京东",myOrderType:"普通订单",reword:[{content:"东西很漂亮，下次再来！",date:"2020.01.03 13:24",person:"用户"}],expressage:"111207",weiChartName:"fsdfg44sf"},
		{ orderId: '18', goodsName: "LISABO 利萨伯",buyNum:3, buyerName: "齐纳蒂", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.01", orderState: "已发货", address: "成都" ,channelId:"天猫",myOrderType:"拼团订单",reword:[{content:"东西很漂亮，下次再来！",date:"2020.01.03 13:24",person:"用户"}],expressage:"111208",weiChartName:"fdgsdfgsgs"},
		{ orderId: '19', goodsName: "LISABO 利萨伯",buyNum:3, buyerName: "康得新", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.01", orderState: "已发货", address: "成都" ,channelId:"天猫",myOrderType:"拼团订单" ,reword:[{content:"东西很漂亮，下次再来！",date:"2020.01.03 13:24",person:"用户"}],expressage:"111209",weiChartName:"4dsfgsdfsh"},
		{ orderId: '20', goodsName: "KORTGARDEN 库佳顿",buyNum:2, buyerName: "阿杜", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2019.12.31", orderState: "待支付", address: "成都" ,channelId:"天猫",myOrderType:"拼团订单",reword:[],expressage:"",weiChartName:"rgsdrfgse5rg"},
		{ orderId: '21', goodsName: "BJORKSNAS 约纳斯",buyNum:1, buyerName: "沃达丰", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.05", orderState: "待发货", address: "成都" ,channelId:"天猫",myOrderType:"拼团订单",reword:[],expressage:"",weiChartName:"fsregssh"},
		{ orderId: '22', goodsName: "BJORKSNAS 约纳斯",buyNum:1, buyerName: "何佳伟", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.05", orderState: "待发货", address: "成都",channelId:"天猫",myOrderType:"普通订单",reword:[],expressage:"",weiChartName:"sfhser544r544"},
		{ orderId: '23', goodsName: "LISABO 利萨伯",buyNum:3, buyerName: "李刚", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.01", orderState: "已发货", address: "成都" ,channelId:"天猫",myOrderType:"普通订单",reword:[{content:"亲亲快点发货，急需！！！",date:"2020.01.03 13:24",person:"用户"}],expressage:"1112010",weiChartName:"fdghse5rhyehsr"},
		{ orderId: '24', goodsName: "LISABO 利萨伯",buyNum:3, buyerName: "李常超", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.01", orderState: "已发货", address: "成都" ,channelId:"天猫",myOrderType:"普通订单",reword:[{content:"这个有运费险吗？",date:"2020.01.03 13:24",person:"用户"}],expressage:"1112011",weiChartName:"srgyserhs5rh"},
		{ orderId: '25', goodsName: "LISABO 利萨伯",buyNum:3, buyerName: "翠花", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.01", orderState: "退款中", address: "成都" ,channelId:"天猫",myOrderType:"普通订单",reword:[],expressage:"",weiChartName:"r5443554e5r4rtf"},
		{ orderId: '26', goodsName: "LISABO 利萨伯",buyNum:3, buyerName: "李健康", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.01", orderState: "退款中", address: "成都" ,channelId:"京东",myOrderType:"普通订单",reword:[],expressage:"",weiChartName:"sdfthjrthrthy"},
		{ orderId: '27', goodsName: "LISABO 利萨伯",buyNum:3, buyerName: "飞翔", buyerTel: "19988886666", sendType: "送货上门", ordertime: "2020.01.01", orderState: "退款中", address: "成都" ,channelId:"京东",myOrderType:"普通订单",reword:[],expressage:"",weiChartName:"sdfhsrthe54sgy5rg54"}
	];
const columns = [
	{
		title: '订单Id',
		dataIndex: 'orderId',
		key: 'orderId',
	},
	{
		title: '商品名称',
		dataIndex: 'goodsName',
		key: 'goodsName',
	},
	{
		title: '购买数量',
		dataIndex: 'buyNum',
		key: 'buyNum',
	},
	{
		title: '收货人姓名',
		dataIndex: 'buyerName',
		key: 'buyerName',
	},
	{
		title: '收货人手机',
		dataIndex: 'buyerTel',
		key: 'buyerTel',
	},
	{
		title: '寄送类型',
		dataIndex: 'sendType',
		key: 'sendType',
	},
	{
		title: '支付时间',
		dataIndex: 'ordertime',
		key: 'ordertime',
	},
	{
		title: '订单状态',
		dataIndex: 'orderState',
		key: 'orderState',
	},
	{
		title: '地址',
		dataIndex: 'address',
		key: 'address',
	},

];
function callback(key) {
	console.log(key);
}
class OrderManage extends React.Component{
	onChange(value) {
		console.log(value);
	};
	onChangeOrderState(value){
		console.log(value);
	};
	onChangeSendType(value){
		console.log(value);
	}
	render(){
		return(
			<div>
				<div className="site-card-wrapper">
					<Card title="订单数据" style={{textAlign:"left"}} bordered={false}>
						<Row gutter={16}>
							<Col span={6}>
								<Card bordered={false}>
									<p>
										<span>今日订单总额</span>
										<span>{0}元</span>
									</p>
									<p>
										<span>本周订单总额</span>
										<span>{0}元</span>
									</p>
									<p>
										<span>本月订单总额</span>
										<span>{0}元</span>
									</p>
									<p>
										<span>历史订单总额</span>
										<span>{0}元</span>
									</p>
								</Card>
							</Col>
							<Col span={6}>
								<Card bordered={false}>
									<p>
										<span>今日订单总额</span>
										<span>{0}元</span>
									</p>
									<p>
										<span>本周订单总额</span>
										<span>{0}元</span>
									</p>
									<p>
										<span>本月订单总额</span>
										<span>{0}元</span>
									</p>
									<p>
										<span>历史订单总额</span>
										<span>{0}元</span>
									</p>
								</Card>
							</Col>
							<Col span={6}>
								<Card bordered={false}>
									<p>
										<span>今日订单总额</span>
										<span>{0}元</span>
									</p>
									<p>
										<span>本周订单总额</span>
										<span>{0}元</span>
									</p>
									<p>
										<span>本月订单总额</span>
										<span>{0}元</span>
									</p>
									<p>
										<span>历史订单总额</span>
										<span>{0}元</span>
									</p>
								</Card>
							</Col>
							<Col span={6}>
								<Card bordered={false}>
									<p>
										<span>今日订单总额</span>
										<span>{0}元</span>
									</p>
									<p>
										<span>本周订单总额</span>
										<span>{0}元</span>
									</p>
									<p>
										<span>本月订单总额</span>
										<span>{0}元</span>
									</p>
									<p>
										<span>历史订单总额</span>
										<span>{0}元</span>
									</p>
								</Card>
							</Col>
						</Row>
					</Card>
				</div>
				<div className="site-card-wrapper">
					<Card title="订单筛选" style={{textAlign:"left"}} bordered={false}>
						<Row gutter={16}>
							<Col span={8}>
								<Card bordered={false}>
									<div>
										<label htmlFor="orderId" style={{ width: '40%',textAlign:'right' }}>订单ID</label>
										<Input type="text" id="orderId" style={{ width: '60%' }} />
									</div>
									<div>
										<label htmlFor="channelOrderId" style={{ width: '40%' }} >渠道订单ID</label>
										<Input type="text" id="channelOrderId" style={{ width: '60%' }} />
									</div>
									<div>
										<label htmlFor="orderTypeOptions">订单类型</label>
										<Cascader id="orderTypeOptions" options={orderTypeOptions} onChange={this.onChange} style={{ width: '60%' }} placeholder="普通订单" />
									</div>
								</Card>
							</Col>
							<Col span={8}>
								<Card bordered={false}>
									<div>
										<label htmlFor="orderStateOptions">订单状态</label>
										<Cascader id="orderStateOptions" options={orderStateOptions} onChange={this.onChangeOrderState} style={{ width: '60%' }} placeholder="已完成" />
									</div>
									<div>
										<label htmlFor="shopName" style={{ width: '40%',textAlign:'right' }}>商品名称</label>
										<Input type="text" id="shopName" style={{ width: '60%' }} />
									</div>
									<div>
										<label htmlFor="buyerName" style={{ width: '40%' }} >收货人姓名</label>
										<Input type="text" id="buyerName" style={{ width: '60%' }} />
									</div>

								</Card>
							</Col>
							<Col span={8}>
								<Card bordered={false}>
									<div>
										<label htmlFor="payTime" style={{ width: '40%',textAlign:'right' }}>支付时间</label>
										<Input type="text" id="payTime" style={{ width: '60%' }} />
									</div>
									<div>
										<label htmlFor="sendType">寄送类型</label>
										<Cascader id="sendType" options={sendTypeOptions} onChange={this.onChangeSendType} style={{ width: '60%' }} placeholder="送货上门" />
									</div>
									<div>
										<label htmlFor="buyerTel" style={{ width: '40%' }} >收货人手机</label>
										<Input type="text" id="buyerTel" style={{ width: '60%' }} />
									</div>

								</Card>
							</Col>
						</Row>
						<Row>
							<Button type="primary" style={{marginRight:"20px"}}>搜索</Button>
							<Button type="primary">全部导出</Button>
						</Row>
					</Card>
				</div>
				<div className="site-card-wrapper">
					<Card title="订单列表" style={{textAlign:"left"}} bordered={false}>
						<Row gutter={16}>
							<Tabs defaultActiveKey="1" onChange={callback}>
								<TabPane tab="全部" key="1">
									<Table dataSource={dataSource} columns={columns} />
								</TabPane>
								<TabPane tab="待回复" key="2">
									Content of Tab Pane 2
								</TabPane>
							</Tabs>
						</Row>
					</Card>
				</div>
			</div>
		)
	}

}
export default OrderManage;